<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="标题" :label-col="{span: 6}" :wrapper-col="{span: 14, offset: 1}">
              <a-input v-model="queryParam.title" placeholder="请输入标题进行模糊检索"/>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="文章类型" :label-col="{span: 6}" :wrapper-col="{span: 14, offset: 1}">
              <ants-dict-select-tag v-model="queryParam.articleType" placeholder="请选择文章类型" dict-code="article_type"/>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="发布状态" :label-col="{span: 6}" :wrapper-col="{span: 14, offset: 1}">
              <ants-dict-select-tag v-model="queryParam.publishState" placeholder="请选择发布状态" dict-code="publish_state"/>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator" style="border-top: 5px">
      <a-button type="primary" icon="delete" @click="recycleBin">回收站</a-button>
    </div>

    <a-table
      ref="table"
      size="middle"
      bordered
      row-key="id"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >


      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"/>
      </template>
      <template slot="articletitle" slot-scope="text">
        <ants-ellipsis :value="text" :length="15"/>
      </template>
      <template slot="articleType" slot-scope="text">
        <a-tag color="green" v-if="text === '原创'">
          {{ text }}
        </a-tag>
        <a-tag color="cyan" v-else-if="text === '转载'">
          {{ text }}
        </a-tag>
        <a-tag color="blue" v-else>
          {{ text }}
        </a-tag>
      </template>
      <template slot="publishState" slot-scope="text">
        <a-tag color="green" v-if="text === '已发布'">
          {{ text }}
        </a-tag>
        <a-tag color="cyan" v-else-if="text === '定时发布'">
          {{ text }}
        </a-tag>
        <a-tag color="blue" v-else>
          {{ text }}
        </a-tag>
      </template>

      <span slot="action" slot-scope="text, record">
        <template v-if="user.name === 'chenshuang'">
          <a @click="handleIsTop(record,'1')" v-if="record.isRecommend === '0'">
          <a-icon type="edit"/>
            置顶
          </a>
          <a @click="handleIsTop(record,'0')" v-else>
            <a-icon type="edit"/>
            取消置顶
          </a>
          <a-divider type="vertical"/>
        </template>
<!--        <a @click="handleEdit(record.id)">-->
<!--          <a-icon type="edit"/>-->
<!--          编辑-->
<!--        </a>-->
        <router-link :to="'/article/publish?recordId='+record.id" target="_blank">
          <a-icon type="eye"/>
          编辑
        </router-link>
        <a-divider type="vertical"/>
        <router-link :to="'/articleDetails/'+record.id" target="_blank">
          <a-icon type="eye"/>
          预览
        </router-link>
        <a-divider type="vertical"/>
        <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
          <a>
            <a-icon type="delete"/>
            删除
          </a>
        </a-popconfirm>
      </span>
    </a-table>

    <recycle-bin ref="recycleBin" @ok="loadData"/>
  </a-card>

</template>

<script>
import {TableListMixin} from '@/mixins/TableListMixin'
import RecycleBin from './modules/RecycleBin'
import AntsEllipsis from "@/components/ants/AntsEllipsis";
import AntsDictSelectTag from "@/components/dict/AntsDictSelectTag";
import {postAction} from "@/api/manage";
import {mapGetters} from "vuex";

export default {
  name: 'ArticleList',
  components: {
    RecycleBin,
    AntsEllipsis,
    AntsDictSelectTag
  },
  mixins: [TableListMixin],

  data() {
    return {
      /* 排序参数 */
      sorter: {
        column: 'publishTime',
        order: 'desc'
      },
      description: '文章管理',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '标题',
          align: 'center',
          dataIndex: 'title',
          width: 260,
          scopedSlots: {customRender: 'articletitle'}
        },
        {
          title: '文章类型',
          align: 'center',
          dataIndex: 'articleType_dictText',
          scopedSlots: {customRender: 'articleType'}
        },
        {
          title: '收藏数',
          align: 'center',
          dataIndex: 'collectNum'
        },
        {
          title: '点赞数',
          align: 'center',
          dataIndex: 'likesNum'
        },
        {
          title: '浏览数',
          align: 'center',
          dataIndex: 'viewsNum'
        },
        {
          title: '发布时间',
          align: 'center',
          dataIndex: 'publishTime'
        },
        // 发布状态；1：已发布；2：定时发布；3：草稿；
        {
          title: '发布状态',
          align: 'center',
          dataIndex: 'publishState_dictText',
          scopedSlots: {customRender: 'publishState'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 200,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/article/list',
        delete: '/article/delete',
        isTop: '/article/isTop',
        deleteBatch: '/article/deleteBatch'
      },
      user: {},
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
      }
    },
    handleEdit(recordId) {
      this.$router.push({
        path: '/article/publish',
        query: {
          recordId: recordId
        }
      })
    },
    handleIsTop(record, istop) {
      record.isRecommend = istop
      postAction(this.url.isTop, record).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          record.isRecommend = '0'
          this.$message.error(res.message)
        }
      })
    },
    recycleBin() {
      this.$refs.recycleBin.showModal()
      this.$refs.recycleBin.title = '回收站'
      this.$refs.recycleBin.disableSubmit = true
    }
  }
}
</script>
